<template>
  <v-overlay
      :value="showPlayer"
      :style="{backdropFilter: `${showPlayer ? 'blur(50px)' : 'unset'}`}"
      :z-index="202">
    <v-dialog
        class="rounded-xl"
        v-model="showPlayer"
        hide-overlay
        :fullscreen="windowWidth <= 700"
        @click:outside="handleDialogClose">
      <v-btn
          class="float-right mt-2 mr-2"
          icon
          dark
          @click="handleDialogClose">
        <v-icon>mdi-close</v-icon>
      </v-btn>
      <div class="prism-player d-flex justify-center align-center" id="J_prismPlayer" v-if="showPlayer">
        <v-progress-circular
            :size="50"
            color="primary"
            indeterminate/>
      </div>
    </v-dialog>
  </v-overlay>
</template>

<script>
/**
 * @description 阿里云Web视频播放器弹出窗组件
 * @property {Boolean} value 控制弹出窗的关闭开启
 * @property {String} auth 视频PlayAuth
 * @property {String} vid 视频Vid
 * @event created 视频播放器初始化完毕回调事件
 * @event close 弹出窗关闭回调事件
 * @example <videoPlayer v-model="showPlayer" :auth="..." :vid="..." @created="..." @close="showPlayer = false"/>
 */
export default {
  name: "videoPlayer",
  props: {
    value: {
      type: Boolean,
      default: true
    },
    auth: {
      type: String,
    },
    vid: {
      type: String,
    }
  },
  data() {
    return {
      player: null, //阿里云Web视频播放器组件
      showPlayer: false, //是否显示视频播放器
      config: {

      }, //视频播放器配置信息
    }
  },
  methods: {
    // 初始化
    init() {
      let _this = this;
      const defaultConfig = JSON.parse(JSON.stringify({
        "id": "J_prismPlayer",
        "qualitySort": "asc",
        "format": "mp4",
        "mediaType": "video",
        "width": "",
        "height": "",
        "autoplay": false,
        "isLive": false,
        "rePlay": false,
        "playsinline": true,
        "preload": true,
        "controlBarVisibility": "hover",
        "useH5Prism": true,
        "skinLayout": [
          {
            "name": "bigPlayButton",
            "align": "blabs",
            "x": 30,
            "y": 80
          },
          {
            "name": "H5Loading",
            "align": "cc"
          },
          {
            "name": "errorDisplay",
            "align": "tlabs",
            "x": 0,
            "y": 0
          },
          {
            "name": "controlBar",
            "align": "blabs",
            "x": 0,
            "y": 0,
            "children": [
              {
                "name": "progress",
                "align": "blabs",
                "x": 0,
                "y": 44
              },
              {
                "name": "playButton",
                "align": "tl",
                "x": 15,
                "y": 12
              },
              {
                "name": "timeDisplay",
                "align": "tl",
                "x": 10,
                "y": 7
              },
              {
                "name": "fullScreenButton",
                "align": "tr",
                "x": 10,
                "y": 12
              },
              {
                "name": "setting",
                "align": "tr",
                "x": 15,
                "y": 12
              },
              {
                "name": "volume",
                "align": "tr",
                "x": 5,
                "y": 10
              }
            ]
          }
        ]
      }));
      let config = Object.getOwnPropertyNames(this.config).length ? Object.assign(defaultConfig, this.config) : defaultConfig;
      this.showPlayer = true;
      setTimeout(() => {
        this.player = new Aliplayer(config, function (player) {
          _this.$emit('created', player);
        });
      }, 500);
    },
    // 视频弹出窗关闭事件
    handleDialogClose() {
      this.showPlayer = false;
      this.player = null;
      this.$emit('close');
    },
  },
  computed: {
    // 屏幕宽度实时数值
    windowWidth() {
      return this.$store.state.screenWidth + 5;
    },
    isShowDialog() {
      return this.value;
    },
    playAuth() {
      return this.auth;
    },
    videoId() {
      return this.vid;
    }
  },
  watch: {
    playAuth(nval) {
      this.$set(this.config, 'playauth', nval);
    },
    videoId(nval) {
      this.$set(this.config, 'vid', nval);
    },
    isShowDialog(nval) {
      this.showPlayer = nval;
      if (nval && !!this.config.playauth && !!this.config.vid) {
        this.init();
      }
    },
    config: {
      deep: true,
      immediate: true,
      handler(nval) {
        if (!!nval.playauth && !!nval.vid) {
          this.init();
        }
      },
    }
  },
  mounted() {
    console.log(this.config)
  }
}
</script>

<style lang="scss" scoped>
@import 'videoPlayer';
</style>